<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>Angular.js nvd3.js Line Chart Directive</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF8">
    <script src="js/angular.js"></script>
    <script src="js/d3.js"></script>
    <script src="js/nv.d3.js"></script>
    <script src="../dist/angularjs-nvd3-directives.js"></script>
    <link rel="stylesheet" href="stylesheets/nv.d3.css"/>
    <script>
        var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

        function ExampleCtrl($scope){

            $scope.fetchData = function() {
                var sin = [], cos = [];

                for (var i = 0; i < 100; i++) {
                    sin.push({x: i, y: Math.sin(i/Math.random())});
                    cos.push({x: i, y: .5 * Math.cos(i/Math.random())});
                }

                return [
                    {
                        values: sin,
                        key: 'Sine Wave',
                        color: '#ff7f0e'
                    },
                    {
                        values: cos,
                        key: 'Cosine Wave',
                        color: '#2ca02c'
                    }
                ];
            }


            $scope.xFunction = function(){
                return function(d){
                    return d.x;
                }
            }

            $scope.yFunction = function(){
                return function(d){
                    return d.y;
                }
            }

            $scope.exampleData = $scope.fetchData();

            setInterval(function(){
                $scope.$apply(function(){
                    var data = $scope.exampleData;
                    var i = (data[1].values[data[1].values.length -1].x + 1);

                    data[0].values.shift();
                    data[1].values.shift();

                    data[0].values.push({x: i , y: Math.sin(i/Math.random())});
                    data[1].values.push({x: i, y: .5 * Math.cos(i/Math.random())});

                    //var data = $scope.fetchData();
                    $scope.exampleData = data;
                })
            }, 5000);


        }


        app.directive('extendedLineChart', function(){
            "use strict";
           return {
               restrict: 'E',
               require: '^nvd3LineChart',
               link: function($scope, $element, $attributes, nvd3LineChart) {
                   $scope.d3Call = function(data, chart){
//                       return d3.select('#' + $scope.id + ' svg')
//                               .datum(data)
//                               .transition()
//                               .duration(500)
//                               .call(chart);

                       var svg = d3.select('#' + $scope.id + ' svg')
                           .datum(data);

                       var path = svg.selectAll('path');
                            path.data(data)
                            .transition()
                            .ease("linear")
                            .duration(500)

                       return svg.transition()
                           .duration(500)
                           .call(chart);

                   }
               }
           }


        });


    </script>

</head>
<body ng-app='nvd3TestApp'>



<div ng-controller="ExampleCtrl">

    <nvd3-line-chart
            data="exampleData"
            id="exampleId"
            width="800"
            height="400"
            showXAxis="true"
            showYAxis="true"
            x="xFunction()"
            y="yFunction()"
            tooltips="true"
            interactive="true"
            margin="{left:50,top:50,bottom:50,right:50}"
            objectEquality="true">
        <svg height="200"></svg>
    </nvd3-line-chart>

    <nvd3-line-chart
            data="exampleData"
            id="extendedExampleId"
            width="800"
            height="400"
            showXAxis="true"
            showYAxis="true"
            x="xFunction()"
            y="yFunction()"
            tooltips="true"
            interactive="true"
            margin="{left:50,top:50,bottom:50,right:50}"
            objectEquality="true">
    <extended-line-chart>
        <svg></svg>
    </extended-line-chart>
    </nvd3-line-chart>
</div>

</body>
</html>